import React, { useState, useEffect } from 'react'
import { Input, message, Modal, Select, Form, Tabs, Button } from 'antd';
import { management_Add, Areabatch, UpdateArea,deleteArea } from './service'
import { ExclamationCircleOutlined } from '@ant-design/icons';
const {confirm} = Modal
const AddadministerModel = ({ GetData, isModalOpen, setIsModalOpen, Edit, EditMsg }) => {


    const [form] = Form.useForm();

    const [form2] = Form.useForm();


    const [value, setValue] = useState([]);


    const [title, setTitle] = useState("添加管理区")

    useEffect(() => {
        let isUnmounted = false;
        setKey("1")
        const res = isEmptyObject(Edit);
        if (!res){
            if (!isUnmounted) {
                setTitle("分配柜号");
                form.setFieldsValue({
                    area_name: Edit.area_name,
                });
            }
        }

        return () => {
            isUnmounted = true;
            EditMsg({});
        };
    }, []);


    function isEmptyObject(obj) {
        return typeof obj === 'object' && Object.keys(obj).length === 0;
    }

    const handleOk = () => {
        if (title === "添加管理区") {

            management_Add({ area_name: value }).then(res => {
                console.log(res)
                if (res.code == 0) {
                    setIsModalOpen(false)
                    message.success("添加成功")
                    GetData()
                } else {
                    message.error(res.msg)
                }
            })
        } else {

            if (key == "1") {
                form.validateFields().then(values => {

                    Areabatch({
                        area_id: parseInt(Edit.id),
                        area_name: values.area_name,
                        locker_type: values.locker_type,
                        locker_num_start: parseInt(values.locker_num_start),
                        locker_num_end: parseInt(values.locker_num_end),
                    }).then(res => {
                        console.log(res)
                        if (res.code == 0) {
                            setIsModalOpen(false)
                            message.success("添加成功")
                            GetData()
                        } else {
                            message.error(res.msg)
                        }
                    })
                })
            }

            if (key == "2") {
                form2.validateFields().then(values => {
                    UpdateArea(Edit.id, {

                        area_name: values.area_name,

                    }).then(res => {
                        if (res.code == 0) {
                            setIsModalOpen(false)
                            message.success("修改成功")
                            GetData()
                        } else {
                            message.error(res.msg)

                        }
                    })
                })
            }


        }
    };


    const [key, setKey] = useState("1")

    const onChange = key => {
        console.log(key);
        setKey(key)
    };





    return (
        <Modal
            title={title}
            visible={isModalOpen}
            onOk={handleOk}
            onCancel={() => setIsModalOpen(false)}
            footer={[
                <Button key="back" onClick={() => setIsModalOpen(false)}>
                    取消
                </Button>,
                key == "2" && <Button
                    key="extra"
                    type="danger"
                    onClick={() => {
                        confirm({
                            title: '确定删除该分区吗?',
                            icon: <ExclamationCircleOutlined />,
                            content: '删除分区后，该分区下的柜将无法使用',
                            okText: '确定',
                            cancelText: '取消',
                            onOk() {
                                deleteArea(Edit.id).then(res => {
                                    if (res.code == 0) {
                                        message.success("删除成功")
                                        GetData()
                                        setIsModalOpen(false)
                                    }else{
                                        message.error(res.msg)
                                    }       
                                })
                            }
                        })
                    }}
                >
                    删除分区
                </Button>,
                <Button key="submit" type="primary" onClick={handleOk}>
                    确定
                </Button>,

            ]}
        >

            {
                title === "添加管理区" ? <div style={{ padding: 30 }}>
                    {/* <Select
                        options={list}
                        placeholder="请选择分区"
                        style={{ width: '100%' }}
                        value={value}
                        mode={"multiple"}
                        onChange={(value) => setValue(value)}
                    /> */}
                    <Input  value={value}  onChange={(e) => setValue(e.target.value)} placeholder='请输入管理区域名称'/>
                </div> : <div style={{ padding: 5 }}><Tabs style={{ paddingTop: "6px !important" }} defaultActiveKey="1" onChange={onChange}>
                    <Tabs.TabPane tab="分配柜号" key="1" >
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 16 }}
                            form={form}
                        >
                            <Form.Item
                                label="区域"
                                name="area_name"
                                rules={[{ required: true, message: '请选择区域!' }]}
                            >
                                <Input disabled />
                            </Form.Item>
                            <Form.Item
                                label="柜类型"
                                name="locker_type"
                                rules={[{ required: true, message: '请选择柜类型!' }]}
                            >
                                <Select
                                    options={[{ label: "鞋柜", value: "鞋柜" }, { label: "更衣柜", value: "更衣柜" }]}
                                    placeholder="请选择区域"

                                />

                            </Form.Item>

                            <Form.Item
                                label="开始柜号"
                                name="locker_num_start"
                                rules={[{ required: true, message: '请输入开始柜号!' }]}
                            >
                                <Input placeholder='请输入开始柜号' />
                            </Form.Item>

                            <Form.Item
                                label="结束柜号"
                                name="locker_num_end"
                                rules={[{ required: true, message: '请输入结束柜号!' }]}
                            >
                                <Input placeholder='请输入结束柜号' />
                            </Form.Item>

                        </Form>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="分区操作" key="2">
                        <br />
                        <Form
                            name="basic"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 16 }}
                            form={form2}
                        >
                            <Form.Item
                                label="修改分区名称"
                                name="area_name"
                                rules={[{ required: true, message: '请输入分区名称!' }]}
                            >
                                <Input placeholder='请输入分区名称' />
                            </Form.Item>


                        </Form>
                    </Tabs.TabPane>

                </Tabs></div>


            }

        </Modal>
    )
}

export default AddadministerModel